<template>
  <div class="container">
    <div class="header">
      <h3 class="myday">我的一天</h3>
      <span>{{date}}, {{weekday}}</span>
    </div>
    <div class="todo">
      <ul>
        <li
          is="todo"
          v-for="todo in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
        ></li>
      </ul>
      <div class="newtodo">
        <i class="el-icon-plus" v-show='!circleVisible' @click='getfocus'></i>
        <i class="circle" v-show="circleVisible"></i>
        <input ref='inputfocus' type="text" v-model="todoVal" placeholder="添加待办事项" @blur="losefocus" @focus="circleVisible = true" @keyup.enter="addTodo">
      </div>
      <div class="temptodo"></div>
    </div>
  </div>
</template>

<script>
import todo from "@/components/todo";

export default {
  name: "myDay",
  data() {
    return {
      date: this.$moment().format("MMM Do"),
      weekday: this.$moment().format("dddd"),
      circleVisible: false,
      todoVal: "",
      todos: [],
      newTodoId: 0
    };
  },
  components: { todo },
  methods: {
    // 点击+获得焦点并改变icon显示
    getfocus() {
      this.circleVisible = !this.circleVisible;
      this.$refs.inputfocus.focus();
    },
    // 失去焦点，改变icon显示
    losefocus() {
      this.circleVisible = false;
    },
    // 新增待办事项
    addTodo() {
      this.todos.push({
        id: this.newTodoId++,
        title: this.todoVal
      });
      this.todoVal = "";
    }
  },
  beforeCreate() {
    this.$moment.locale("zh-cn");
  }
};
</script>

<style scoped lang="less" src="./index.less"></style>

